<template>
  <div class="flex flex-col min-h-screen overflow-hidden">
    <!-- Site header -->
    <Header />

    <!-- Page content -->
    <main class="grow">
      <ServicesBanner :params="bannerParams" />

      <!-- What is Silicone Compression Molding -->
      <WhatIs class="mt-24" />
      <!-- The Process of Silicone Compression Molding -->
      <Process class="mt-24" />
      <!-- Advantages of compression molding -->
      <Advantages class="mt-16" />

      <Applications :applications="applications" class="mt-24" />
      <!-- OUR ADVANTAGE -->
      <OurAdvantage class="mt-24" />
      <StatsCard class="mt-24" />
      <CompressionMoldingFAQs class="mt-24" />
    </main>
    <!-- Site footer -->
    <Footer />
  </div>
</template>

<script setup>
import Header from '../../components/common/Header.vue'
import Footer from '/src/components/common/Footer.vue'
import StatsCard from '../../components/common/StatsCard.vue'
import Applications from '../../components/common/Applications.vue'
import OurAdvantage from '../../components/Home/OurAdvantage.vue'
import CompressionMoldingFAQs from "../../components/Services/CompressionMolding/CompressionMoldingFAQs.vue";
import ServicesBanner from "../../components/ServicesBanner.vue";
import WhatIs from "../../components/Services/CompressionMolding/WhatIs.vue";
import Process from "../../components/Services/CompressionMolding/Process.vue";
import Advantages from "../../components/Services/CompressionMolding/Advantages.vue";

import banner from "/src/images/services/banner-compression-molding.webp";

const applications = {
  title: 'Applications',
  subTitle:
      'Silicone rubber is a key sealing material in various industries. Due to its many unique and optimal qualities, silicone rubber is often sought after in various applications.'
}

const bannerParams = {
  title: 'Compression Molding Service',
  imgUrl: banner,
  subtitle: [
    'Get custom silicone rubber parts within 5 days.',
  ]
}
</script>

<style scoped></style>
